<template>
  <div class="dialog">
    <el-dialog
      :title="'保养项模板配置'+titleText"
      :visible.sync="showDialog"
      width="35%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-form-item label="保养项名称：" class="w100p" prop="checkItemName">
          <el-input
            v-model="formData.checkItemName"
            clearable
            placeholder="请输入保养项名称"
          />
        </el-form-item>
        <el-form-item label="保养方式：" class="w100p" prop="accessMethod">
          <el-input
            v-model="formData.accessMethod"
            clearable
            placeholder="请输入保养项名称"
          />
        </el-form-item>
        <el-form-item label="保养项类型：" class="w100p" prop="checkType">
          <el-select
            v-model="formData.checkType"
            clearable
            filterable
            placeholder="保养项类型选择"
            @change="changeCheckType"
          >
            <el-option
              v-for="item of checkTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item v-if="formData.checkType==='NUMTYPE'" label="是否摄温：" class="w100p" prop="whetherTemperature" required :rules="[{ required: formData.checkType==='NUMTYPE'?true:false, message: '请选择是否摄温'}]">
          <el-select
            v-model="formData.whetherTemperature"
            clearable
            filterable
            placeholder="是否摄温选择"
          >
            <el-option
              v-for="item of whetherTemperatureList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>-->
        <el-form-item
          v-if="formData.checkType==='NUMTYPE'"
          label="单位："
          class="w100p"
          prop="unitName"
        >
          <div class="hang-content">
            <div
              v-for="(key,indexU) in formData.unitName"
              :key="indexU+'unit'"
              class="hang-content-one"
            >
              <el-input
                v-model="formData.unitName[indexU]"
                clearable
                placeholder="请输入单位"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="formData.checkType==='BOOLEANTYPE'"
          label="内容："
          class="w100p"
          prop="twoListbtn"
        >
          <div
            v-if="formData.twoListbtn.length< 2 "
            class="line-click"
            @click="addTwo()"
          >
            <i class="el-icon-plus"></i>
          </div>
          <div class="hang-content">
            <div
              v-for="(key,indexT) in formData.twoListbtn"
              :key="indexT+'two'"
              class="hang-content-one"
            >
              <el-input
                v-model="formData.twoListbtn[indexT]"
                clearable
                placeholder="请输入内容"
              />
              <div class="line-click" @click="delTwo(indexT)">
                <i class="el-icon-minus"></i>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="formData.checkType==='ENUMTYPE'"
          label="内容："
          class="w100p"
          prop="addListbtn"
        >
          <div class="line-click" @click="addAll()">
            <i class="el-icon-plus"></i>
          </div>
          <div class="hang-content">
            <div
              v-for="(key,indexA) in formData.addListbtn"
              :key="indexA+'two'"
              class="hang-content-one"
            >
              <el-input
                v-model="formData.addListbtn[indexA]"
                clearable
                placeholder="请输入内容"
              />
              <div class="line-click" @click="delAll(indexA)">
                <i class="el-icon-minus"></i>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import maintenanceDataitemApi from "@/api/equip-maintenance-manage/maintenance-dataitem";

export default {
  name: "",
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: "",
    },
    nowChanceStau: {
      type: String,
      default: "",
    },
    show: {
      type: Boolean,
      default: false,
    },
    editObject: {
      type: [Object],
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      formData: { unitName: [""], twoListbtn: [""], addListbtn: [""] },
      rules: {
        checkItemName: [
          {
            required: true,
            message: "请输入保养项名称",
            trigger: ["change", "blur"],
          },
        ],
        checkType: [
          {
            required: true,
            message: "请选择关保养项类型",
            trigger: ["change", "blur"],
          },
        ],
      },
      // 保养项类型
      checkTypeList: [
        { id: "TEXTTYPE", name: "文本型" },
        { id: "ENUMTYPE", name: "列表型" },
        { id: "BOOLEANTYPE", name: "是否型" },
        { id: "NUMTYPE", name: "数字型" },
      ],
      // // 是否摄温
      // whetherTemperatureList: [{ id: true, name: '是' }, { id: false, name: '否' }],
      showDialog: this.show,
    };
  },
  watch: {
    show(v) {
      this.showDialog = v;
    },
    nowChanceStau(v) {
      if (!this.showDialog) return;
      if (v === "add") {
        this.formData = {};
        this.$set(this.formData, "unitName", [""]);
        this.$set(this.formData, "twoListbtn", [""]);
        this.$set(this.formData, "addListbtn", [""]);
      }
      if (v === "edit") {
        this.formData = this.editObject;
        if (this.formData["checkType"] === "NUMTYPE") {
          if (this.formData["unitName"]) {
            this.formData["unitName"] = this.formData["unitName"].split(",");
          } else {
            this.formData.unitName = [""];
          }
        } else {
          this.formData.unitName = [""];
        }
        if (this.formData["checkType"] === "BOOLEANTYPE") {
          this.formData["twoListbtn"] = this.formData["enumContent"].split(",");
        } else {
          this.formData.twoListbtn = [""];
        }
        if (this.formData["checkType"] === "ENUMTYPE") {
          this.formData["addListbtn"] = this.formData["enumContent"].split(",");
        } else {
          this.formData.addListbtn = [""];
        }
        this.formData = { ...this.formData };
        console.log("nowChanceStau", this.formData);
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    changeCheckType() {
      this.formData = { ...this.formData };
    },
    // 点击添加按按钮
    addUnit() {
      this.$set(this.formData.unitName, this.formData.unitName.length, "");
      this.formData = [...this.formData];
    },
    // 删除改行
    delUnit(index) {
      this.formData.unitName.splice(index, 1);
    },
    // 点击添加按按钮
    addTwo() {
      this.$set(this.formData.twoListbtn, this.formData.twoListbtn.length, "");
      this.formData.twoListbtn = [...this.formData.twoListbtn];
    },
    // 删除改行
    delTwo(index) {
      this.formData.twoListbtn.splice(index, 1);
    },
    // 点击添加按按钮
    addAll() {
      this.$set(this.formData.addListbtn, this.formData.addListbtn.length, "");
      this.formData.addListbtn = [...this.formData.addListbtn];
    },
    // 删除改行
    delAll(index) {
      this.formData.addListbtn.splice(index, 1);
    },
    save(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          var form = this.formData;
          var params = {};
          if (this.nowChanceStau === "edit") {
            params = {
              checkItemModelId: form["checkItemModelId"],
              checkItemName: form["checkItemName"],
              checkType: form["checkType"],
              accessMethod: form["accessMethod"],
              // whetherTemperature: form['whetherTemperature'] === true
            };
            if (this.formData.checkType === "ENUMTYPE") {
              params["enumContent"] = form.addListbtn.toString();
            }
            if (this.formData.checkType === "BOOLEANTYPE") {
              params["enumContent"] = form.twoListbtn.toString();
            }
            if (this.formData.checkType === "NUMTYPE") {
              params["unitName"] = form.unitName.toString();
            }
            params.organizationMark = sessionStorage.organizationMark;
            maintenanceDataitemApi.editTempalte(params).then((res) => {
              if (res.code === 1) {
                this.$message.success("修改成功！");
                this.close();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else if (this.nowChanceStau === "add") {
            params = {
              checkItemName: form["checkItemName"],
              checkType: form["checkType"],
              accessMethod: form["accessMethod"],
              // whetherTemperature: false
            };
            if (this.formData.checkType === "ENUMTYPE") {
              params["enumContent"] = form.addListbtn.toString();
            }
            if (this.formData.checkType === "BOOLEANTYPE") {
              params["enumContent"] = form.twoListbtn.toString();
            }
            if (this.formData.checkType === "NUMTYPE") {
              // params['whetherTemperature'] = form['whetherTemperature'];
              params["unitName"] = form.unitName.toString();
            }
            params.organizationMark = sessionStorage.organizationMark;
            maintenanceDataitemApi.addTempalte(params).then((res) => {
              if (res.code === 1) {
                this.$message.success(res.msg);
                this.close();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    close() {
      this.clearValidate();
      this.$emit("closeDialog");
    },
    cancel() {
      this.clearValidate();
      this.$emit("cancelDialog");
    },
    clearValidate() {
      this.formData = {};
      this.$refs.ruleForm.clearValidate();
      this.$refs["ruleForm"].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.line-click {
  width: 35px;
  height: 30px;
  // background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  border: snow 1px solid;
  border-radius: 50%;
  margin-bottom: 10px;
  margin-top: 5px;
  margin-left: 5px;
  color: #fff;
  background-color: #003947;
  cursor: pointer;
}
.hang-content {
  width: 100%;
  .hang-content-one {
    width: 100%;
    display: flex;
  }
}
</style>
